<template>
  <x-header :left-options="leftOptions" :title="title" @on-click-back="back">
    <span slot="overwrite-left" v-if="!visibleBackBtn"></span>
    <span slot="right">
      <slot name="right"></slot>
    </span>
  </x-header>
</template>

<script>
import { XHeader } from 'vux'

export default {
  props: {
    title: {},
    visibleBackBtn: {
      default: true
    }
  },

  components: {
    XHeader
  },

  data (){
    return {
      leftOptions: {
        backText: '',
        preventGoBack: true
      }
    }
  },

  methods: {
    back (){
      if(history.length === 1){
        this.$toView('index/home')
      }else{
        this.$router.back()
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .vux-header-title{
  font-weight: bold !important;
}
/deep/ .vux-header-left > .left-arrow{
  &::before{
    display: none;
  }

  background-image: url('~@img/btn/GoBbck@2x.png');
  background-repeat: no-repeat;
  background-size: 12px;
  background-position: left center;
}
</style>